 <!-- 如果当前路由不需要显示菜单，则不渲染菜单 -->
<!--    在 App.vue 的 mounted 钩子中，根据当前路由的 meta.showMenu 初始化 showMenu，确保即使直接通过 URL 访问时，菜单的显示状态也能正确设置。-->
<!--    使用 watch 监听 $route 的变化，动态更新菜单显示状态。-->
<!--    确保路由配置中的 meta.showMenu 值正确。-->
<!-- ele 图标参考 https://element.eleme.cn/2.13/#/zh-CN/component/icon-->
 <template>
   <div id="app">
     <el-container>
       <!-- 左侧树形菜单 -->
       <el-aside :width="isCollapsed ? '5%' : '15%'" class="aside-menu">
         <div class="toggle-button" @click="toggleAside">
           <el-icon>
             <i :class="isCollapsed ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
           </el-icon>
         </div>
         <el-tree
           :data="menuTreeData"
           :props="defaultProps"
           @node-click="handleTreeClick"
           highlight-current
           default-expand-all
           class="tree-menu"
         >
           <!-- 自定义节点内容 -->
           <template #default="{ node, data }">
             <div class="menu-item">
               <el-icon :name="data.icon" />
               <span v-if="!isCollapsed" class="node-label">{{ data.label }}</span>
             </div>
           </template>
         </el-tree>
       </el-aside>

       <!-- 右侧内容区域 -->
       <el-container>
         <el-header v-if="showMenu">
           <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" class="menu-bar">
             <el-submenu index="1">
               <template #title>导航</template>
               <el-menu-item index="/dashboard">驾驶舱</el-menu-item>
               <el-menu-item index="/chat">交互</el-menu-item>
             </el-submenu>

             <el-submenu index="2">
               <template #title>工具</template>
               <el-menu-item index="/drip">水滴</el-menu-item>
               <el-menu-item index="/alarmrpt">告警监控汇总</el-menu-item>
               <el-menu-item index="/yth">YTH</el-menu-item> <!-- 新增的菜单项 -->
             </el-submenu>

             <el-submenu index="3" class="user-menu">
               <template #title>
                 <!-- 如果用户名存在，则显示用户名，否则显示 '用户' -->
                 <span>{{ username || '用户' }}</span>
               </template>
               <el-menu-item index="help">帮助</el-menu-item>
               <el-menu-item v-if="username" index="logout" @click="logout">注销</el-menu-item>
               <el-menu-item v-else index="login" @click="goToLogin">登录</el-menu-item>
             </el-submenu>
           </el-menu>
         </el-header>

         <el-main>
           <router-view />
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>

 <script>
 export default {
   name: 'App',
   data () {
     return {
       activeMenu: this.$route.path,
       showMenu: true,
       isCollapsed: false,
       menuTreeData: [
         {
           label: '导航',
           icon: 'menu', // 使用图标名称
           children: [
             { label: '驾驶舱', path: '/dashboard', icon: 'monitor' }, // 使用图标名称
             { label: '交互', path: '/chat', icon: 'news' } // 使用图标名称
           ]
         },
         {
           label: '工具',
           icon: 'open',
           children: [
             { label: '水滴', path: '/drip', icon: 'cherry' },
             { label: '告警监控汇总', path: '/alarmrpt', icon: 'data-analysis' },
             { label: 'YTH', path: '/yth', icon: 'document' } // 新增的菜单项
           ]
         },
         // {
         //   label: '用户',
         //   icon: 'user',
         //   children: [
         //     { label: '帮助', path: 'help', icon: 'question' },
         //     { label: '注销', path: 'logout', icon: 'switch-button' }
         //   ]
         // }
         {
           label: '用户',
           icon: 'user',
           children: this.getUserMenu() // 动态获取用户菜单
         }
       ],
       defaultProps: {
         children: 'children',
         label: 'label'
       }
     }
   },
   computed: {
     // 从 Vuex 获取用户名
     username () {
       return this.$store.state.username || localStorage.getItem('username') || ''
     }
   },
   methods: {
     getUserMenu () {
       if (this.username) {
         // 如果已登录，显示注销
         return [
           {label: '帮助', path: '/help', icon: 'question'},
           {label: '注销', path: '/logout', icon: 'switch-button'}
         ]
       } else {
         // 如果未登录，显示登录
         return [
           {label: '帮助', path: '/help', icon: 'question'},
           {label: '登录', path: '/logon', icon: 'switch-button'}
         ]
       }
     },
     handleSelect (index) {
       // 如果目标路由和当前路由相同，跳过导航
       if (this.$route.path === index) {
         return
       }
       this.$router.push(index)
       this.activeMenu = index
     },
     handleTreeClick (node) {
       if (node.path) {
         // 如果目标路由和当前路由相同，跳过导航
         if (this.$route.path === node.path) {
           return
         }
         if (node.path === 'logout') {
           this.logout()
         } else {
           this.$router.push(node.path)
           this.activeMenu = node.path
         }
       }
     },
     // logout () {
     //   this.$router.push('/logout') // 修改为路由到 /logout 页面
     // },
     logout () {
       // 清除 Vuex 和 LocalStorage 中的相关信息
       this.$store.commit('setAccessToken', null)
       this.$store.commit('setRefreshToken', null)
       this.$store.commit('setUsername', '')
       localStorage.removeItem('access_token')
       localStorage.removeItem('refresh_token')
       localStorage.removeItem('username')

       // 跳转到登录页面
       this.$router.push('/logon')
     },
     goToLogin () {
       // 跳转到登录页面
       this.$router.push('/logon')
     },
     toggleAside () {
       this.isCollapsed = !this.isCollapsed
     }
   },
   watch: {
     // 监听 username 的变化
     username (newVal) {
       this.menuTreeData = [
         {
           label: '导航',
           icon: 'menu',
           children: [
             { label: '驾驶舱', path: '/dashboard', icon: 'monitor' },
             { label: '交互', path: '/chat', icon: 'news' }
           ]
         },
         {
           label: '工具',
           icon: 'open',
           children: [
             { label: '水滴', path: '/drip', icon: 'cherry' },
             { label: '告警监控汇总', path: '/alarmrpt', icon: 'data-analysis' }
           ]
         },
         {
           label: '用户',
           icon: 'user',
           children: this.getUserMenu() // 根据登录状态动态更新用户菜单
         }
       ]
     },
     '$route' (to) {
       this.activeMenu = to.path
       this.showMenu = to.meta.showMenu !== false
     }
   },
   mounted () {
     this.showMenu = this.$route.meta.showMenu !== false
     // 如果当前路径是 `/`，自动跳转到 `/dashboard`
     if (this.$route.path === '/') {
       this.$router.push('/dashboard')
     }
   }
 }
 </script>

 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   text-align: center;
   height: 100vh;
 }

 .el-container {
   height: 100%;
 }

 .el-aside {
   background: #f0f2f5;
   overflow: hidden;
   position: relative;
   transition: width 0.3s;
 }

 .aside-menu {
   display: flex;
   flex-direction: column;
   justify-content: start;
 }

 .toggle-button {
   position: absolute;
   top: 10px;
   right: -12px;
   width: 24px;
   height: 24px;
   background: #ffffff;
   border: 1px solid #dcdcdc;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   z-index: 10;
 }

 .tree-menu {
   padding: 10px;
   transition: all 0.3s;
 }

 .menu-item {
   display: flex;
   align-items: center;
 }

 .menu-item .el-icon {
   margin-right: 10px;
 }

 .node-label {
   display: inline-block;
   white-space: nowrap;
 }

 .el-header {
   background: #ffffff;
   border-bottom: 1px solid #e0e0e0;
 }

 .el-main {
   padding: 20px;
 }

 .el-menu {
   margin-bottom: 0;
   display: flex;
   justify-content: space-between;
 }

 .el-menu .user-menu {
   margin-left: auto;
 }
 </style>
